 <template>
  <div>
    <Header />
    <div class="goods-box-body">
      <div class="list-bar">
        <div class="list-sort">
          <img src="../assets/img/sort.png" alt="" @click="handlesort" />
        </div>
        <div class="list-filter">
          <img src="../assets/img/filter.png" alt="" @click="handlefilter" />
        </div>
        <div class="box-layer" v-if="isshow" :style="{ height: height + 'px' }">
          <div class="list-sort-box">
            <div @click="handlechoose">按综合排序</div>
            <div @click="handlechoose">按销量排序</div>
            <div @click="handlechoose">按价格排序</div>
            <div @click="handlechoose">按上市时间排序</div>
          </div>
        </div>

        <div class="box-layer" v-if="isShow" :style="{ height: height + 'px' }">
          <div class="list-sort-box list-filter-box">
            <div class="item-filter cur" @click="handlesize">
              <span>按尺寸筛选</span>
              <span v-if="!issize">+</span>
              <span v-if="issize">-</span>
            </div>
            <ul class="item-filter-list" v-if="issize">
              <li
                class="item-other"
                @click="handlechoose"
                v-for="(item, index) in seriesdata.sizeList"
                :key="index"
              >
                {{ item.sizeName }}
              </li>
            </ul>
            <div class="item-filter cur" @click="handlecolor">
              <span>按颜色筛选</span>
              <span v-if="!iscolor">+</span>
              <span v-if="iscolor">-</span>
            </div>
            <ul class="item-filter-list" v-if="iscolor">
              <li
                class="item-other"
                @click="handlechoose"
                v-for="(item, index) in seriesdata.colorList"
                :key="index"
              >
                {{ item.colorName }}
              </li>
            </ul>
            <div class="item-filter cur" @click="handleseries">
              <span>按系列筛选</span>
              <span v-if="!isseries">+</span>
              <span v-if="isseries">-</span>
            </div>
            <ul class="item-filter-list" v-if="isseries">
              <li
                class="item-other"
                @click="handlechoose"
                v-for="(item, index) in seriesdata.seriesList"
                :key="index"
              >
                {{ item.seriesName }}
              </li>
            </ul>
            <div class="item-filter cur" @click="handleshape">
              <span>按形状筛选</span>
              <span v-if="!isshape">+</span>
              <span v-if="isshape">-</span>
            </div>
            <ul class="item-filter-list" v-if="isshape">
              <li
                class="item-other"
                @click="handlechoose"
                v-for="(item, index) in seriesdata.designList"
                :key="index"
              >
                {{ item.designName }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <ul class="goods-list" :style="{ 'min-height': vah }">
          <li v-for="(item, index) in goodsdata" :key="index">
            <router-link :to="'/detail/' + item.id">
              <img :src="item.imgs[0].imgpath" alt="" />
              <div class="item-xlname">{{ item.proSeries }}</div>
              <div class="item-proname">{{ item.proName }}</div>
              <div class="item-price">￥{{ item.proPrice }}</div>
            </router-link>
          </li>
        </ul>
      </van-list>
      <van-divider :style="{ borderColor: 'grey', padding: '0 1.2rem' }"
        >已经全部加载完成</van-divider
      >
    </div>
  </div>
</template>

<script>
import {detailServer} from '../api/http'
import axios from 'axios'
import Header from "../components/Header.vue";
import { seriesData } from "../api/goods";
// import { goodsData } from "../api/goods"
export default {
  components: {
    Header,
  },
  data() {
    return {
      isshow: false,
      isShow: false,
      issize: false,
      iscolor: false,
      isseries: false,
      isshape: false,
      height: 0,
      seriesdata: [],
      goodsdata: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
    };
  },
  created() {
    //屏幕高度
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.vah = h - 168 + "px";
    let {id}=this.$route.params
    seriesData(id).then((res)=>{
      this.seriesdata=res.data
      // console.log(res.data)
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.height = this.$el.clientHeight;
      // console.log(this.height)
    });
  },
  methods: {
    handlesort() {
      this.show = true;
      this.isshow = true;
      this.isShow = !this.isshow;
    },
    handlefilter() {
      this.show = true;
      this.isShow = true;
      this.isshow = !this.isShow;
    },
    handlesize(res) {
      console.log(res);
      this.issize = !this.issize;
    },

    handlecolor() {
      this.iscolor = !this.iscolor;
    },
    handleseries() {
      this.isseries = !this.isseries;
    },
    handleshape() {
      this.isshape = !this.isshape;
    },
    handlechoose() {
      this.isshow = false;
      this.isShow = false;
      this.show = false;
    },
    onLoad() {
      let {id}=this.$route.params
      axios
        .get(
          detailServer +
            `/proTag/proList?menuId=${id}&pageNum=${this.page}&sort=&proSeries=&proSize=&proColor=&proDesign=`
        )
        .then(res=> {
          let { products } = res.data
          console.log(res.data)
          console.log(products.length)
          if (products.length) {
            this.goodsdata = [
              ...this.goodsdata, //旧数据
              ...products, //新数据
            ];
            this.page++;
          }else{
            this.finished = true;
          }
          this.loading = false;
        })
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/goods.css");
</style>